/*
 * @Author: suxingle suesle2022@163.com
 * @Date: 2022-07-30 14:03:48
 * @LastEditors: suxingle suesle2022@163.com
 * @LastEditTime: 2022-07-31 22:38:32
 * @FilePath: \myassessment\src\list\nav.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import "./index.css"
import "../../src/assets/reset.css"
import search from "../../src/assets/search.svg";
import message from "../../src/assets/message.svg";
import React, {useState,useEffect,Pagination} from 'react';
import axios from "axios";
import {HashRouter as Router} from 'react-router-dom';


const List = () => {
  const [videoList, setVideoList] = useState([]);
  const getVideoList = async () => {
    const { data } = await axios({
      url: "https://www.fastmock.site/mock/cac0d1825d5a949eda9703bd1f4e3f13/test/test",
      method: "get",
    });
    console.log("data.data :>> ", data.data);
    setVideoList(data.data);
  };
  useEffect(() => {
    getVideoList();
  }, []);
  
  return (
   <div className="List">
        <div className="ListHead">
          <div className='nav'>
            <div className='logo'>
              <img style={{ width: "100%", height: "24px" }} src={require("../../src/assets/logo1.png")}></img>
            </div>
            <ul className='navlist'>
              <li>应用市场</li>
              <li>开发者 <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
              <li>社区合作伙伴  <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
              <li>支持与服务  <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
              <li>运营与管理  <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
            </ul>
            <ul className='navright'>
              <li><img src={search} /></li>
              <li className='message'><img src={message} />
                <span>99+</span>
              </li>
              <li>控制台</li>
              <li><img style={{ width: "30px", height: "30px" }} src={require("../../src/assets/头像@2x.png")} /></li>
              <li>momo.zxy  <span><img style={{ width: "12px", heigrt: "12px" }} src={require("../../src/assets/down@2x.png")} /></span></li>
            </ul>
          </div>
          {/* search */}
          <div className='searchModular' >
            <div style={{ height: "32px", fontSize: "32px", lineHeight: "32px" }}>视频中心</div>
            <div style={{ height: "28px", margin: "16px 0 24px 0", fontSize: "14px" }}>帮您快速了解汉得产品，助力交付使用全流程</div>
            <div className="searchKeyword" style={{ height: "40px", width: '743px' }}>
              <input type="text" placeholder="请搜索类别/视频名称"></input>
              <button>搜索</button>
            </div>
          </div>
        </div>
        <div className="searchContent">
            <div className="searchresult">
                共找到800个2020相关的视频
            </div> 
            <ul className="searchlist">
                <li>
                    <div>
                        <div className="left">
                            <div className="img">
                                <img src={require("../../src/assets/picture.jpg")} />
                            </div>
                            <div>1286次播放</div>
                        </div>
                        <div className="right">
                            <div>
                                <span>2020前端技术的发展趋势</span><span>12节</span>
                            </div>
                            <div>
                                <span>Hearo企业版</span><span>赋能培训</span>
                            </div>
                            <div>
                            2020HZERO技术中台，结合了汉得多年的项目实施经验，抽象、封装的大量的标准服务及功能，以帮助企业产品研发、项目实施更加高效便捷，避免大量重复造轮子所带来的成本浪费。平台主要包含业务中台、数据中台和技术中台，目标是搭建一个可支持各种产品快速组建、开发的融合平台。
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <div className="left">
                            <div className="img">
                                <img src={require("../../src/assets/picture.jpg")} />
                            </div>
                            <div>1286次播放</div>
                        </div>
                        <div className="right">
                            <div>
                                <span>2020前端技术的发展趋势</span><span>12节</span>
                            </div>
                            <div>
                                <span>Hearo企业版</span><span>赋能培训</span>
                            </div>
                            <div>
                            2020HZERO技术中台，结合了汉得多年的项目实施经验，抽象、封装的大量的标准服务及功能，以帮助企业产品研发、项目实施更加高效便捷，避免大量重复造轮子所带来的成本浪费。平台主要包含业务中台、数据中台和技术中台，目标是搭建一个可支持各种产品快速组建、开发的融合平台。
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <div className="left">
                            <div className="img">
                                <img src={require("../../src/assets/picture.jpg")} />
                            </div>
                            <div>1286次播放</div>
                        </div>
                        <div className="right">
                            <div>
                                <span>2020前端技术的发展趋势</span><span>12节</span>
                            </div>
                            <div>
                                <span>Hearo企业版</span><span>赋能培训</span>
                            </div>
                            <div>
                            2020HZERO技术中台，结合了汉得多年的项目实施经验，抽象、封装的大量的标准服务及功能，以帮助企业产品研发、项目实施更加高效便捷，避免大量重复造轮子所带来的成本浪费。平台主要包含业务中台、数据中台和技术中台，目标是搭建一个可支持各种产品快速组建、开发的融合平台。
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
  )
};

export default List;